<template>
    <view v-if="visible" >
        <view class="custom-toast-bg">
			<view class="custom-toast" :class="position">
				<image v-if="image" :src="image" class="toast-icon" />
				<view class="toast-text">{{ title }}</view>
			</view>
		</view>
    </view>
</template>

<script>
export default {
    props: {
        title: String,
        image: String,
        position: {
            type: String,
            default: 'center' // top/center/bottom
        },
        duration: {
            type: Number,
            default: 2000
        }
    },
    data() {
        return {
            visible: false
        };
    },
    methods: {
        show() {
            this.visible = true;
            setTimeout(() => {
                this.visible = false;
            }, this.duration);
        }
    }
};
</script>

<style lang="scss" scoped>
.custom-toast-bg{
	position: fixed; /* 固定定位 */
	top: 0;
	left: 0;
	width: 100%; /* 宽度100% */
	height: 100%; /* 高度100% */
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 999;
}
.custom-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: #FFF;
    border-radius: 24rpx;
    z-index: 9999;
	text-align: center;
}
.custom-toast.top { top: 20%; }
.custom-toast.center { top: 50%; transform: translate(-50%, -50%); }
.custom-toast.bottom { bottom: 20%; }
.toast-icon {
    width: 62rpx;
    height: 62rpx;
    margin: 48rpx auto 8rpx;
}
.toast-text {
    font-size: 32rpx;
	color: #323438;
	margin: 8rpx 48rpx 48rpx;
}
</style>
